<template>
  <el-form-item class="edit-item edit-item-dropdown dropdown-normal">
    <slot name="label">
      <label>
        {{ label }}
        <tooltip-common v-if="getTooltips" :tooltips="getTooltips"></tooltip-common>
      </label>
    </slot>
    <el-select
      v-model="modelValue"
      @change="onChange($event)"
      :placeholder="placeholder"
      :disabled="toBool(disabled)"
    >
      <el-option
        v-for="(val, index) in valLists"
        :key="index"
        :label="val.name"
        :value="val.value"
        :disabled="toBool(val.disabled)"
      >
      </el-option>
    </el-select>
    <el-button
      v-show="bIsBtn"
      @click.stop="handleChange('+')"
      style="margin-left: 6px !important; margin-right: 6px !important"
      ><i class="jy-icon-font-increase"></i
    ></el-button>
    <el-button v-show="bIsBtn" @click.stop="handleChange('-')"
      ><i class="jy-icon-font-reduction"></i
    ></el-button>
  </el-form-item>
</template>

<script setup lang="ts">
import TooltipCommon from "./tooltip-common.vue";

interface Props {
  modelValue: string | number;
  label: string;
  valLists: any[];
  tooltips?: string;
  placeholder?: string;
  bIsBtn?: boolean;
  disabled?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  tooltips: "",
  placeholder: "",
  bIsBtn: false,
  disabled: false,
});

const tooltips = props.tooltips;
const placeholder = props.placeholder;
let modelValue_ = Number(props.modelValue);

const getTooltips = computed(() => {
  return !tooltips && placeholder ? placeholder : tooltips;
});

const emit = defineEmits(["change", "update:modelValue"]);

const handleChange = (type: string | number) => {
  if (type === "+") {
    modelValue_ = Number(modelValue_) + 1;
  } else if (type === "-") {
    modelValue_ = Number(modelValue_) - 1 < 12 ? 12 : Number(modelValue_) - 1;
  }
  onChange(modelValue_);
};
const onChange = (val: string | number) => {
  emit("update:modelValue", val);
  emit("change", val);
};
const toBool = (val: boolean) => {
  return typeof val === "boolean" ? val : val === "true" ? true : false;
};
</script>
